<script lang="ts" setup name="techniqueUtTechnique">
import { getListByConditionsWithPage, urls } from '@/index';
import type {
  DialogModel,
  EquipmentUtProbeType,
  EquipmentUtProbeTypeQueryCondition,
  UtTechnique,
  UtTechniqueQueryCondition
} from '@/index.d';
import { useRequest } from 'vue-request';
import UtProbeTypeDetailDialog from './DetailDialog.vue';

const title = ref<string>('超声检测工艺');

const queryCondition = reactive<UtTechniqueQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  queryCondition.deleted = false;
  delete queryCondition.projectId;
};

const {
  data: getMainTableListData,
  run: getMainTableListRun,
  loading: getMainTableListLoading
} = useRequest(() =>
  getListByConditionsWithPage<UtTechnique>(urls.techniqueUtTechnique, queryCondition)
);

const handleResetQuery = () => {
  resetQueryCondition();
  getMainTableListRun();
};

const detailDialogModel = reactive<DialogModel<UtTechnique>>({
  visible: false,
  title: title.value as string,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getMainTableListRun();
      detailDialogModel.change = false;
    }
  }
);
</script>
<template>
  <HqContainerTable
    :base-url="urls.techniqueUtTechnique"
    :title="title"
    :loading="getMainTableListLoading"
    :total="getMainTableListData?.total"
    :table-data="getMainTableListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getMainTableListRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getMainTableListRun"
    v-model:detail-dialog-model="detailDialogModel"
    operate-column
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.projectId"
          placeholder="请选择项目名称"
          clearable
          filterable
          @change="getMainTableListRun"
        >
          <HqProjectNameOptions />
        </el-select>
      </hq-col>
    </template>
    <template #button> </template>
    <template #tableColumns>
      <HqTableColumn label="项目名称" prop="projectName" :min-width="100" />
      <HqTableColumn label="工件名称" prop="partName" :min-width="100" />
      <HqTableColumn label="工件编号" prop="partReference" :min-width="100" />
      <HqTableColumn label="检测时机" prop="testStage" :min-width="100" />
      <HqTableColumn label="扩展名称" prop="extentName" :min-width="100" />
      <HqTableColumn label="检测示意图" prop="检测示意图" :min-width="100" />
    </template>
  </HqContainerTable>

  <UtProbeTypeDetailDialog
    v-model:dialog-model="detailDialogModel"
    v-if="detailDialogModel.visible"
  />
</template>
<style lang="scss" scoped></style>
